import Taro from '@tarojs/taro'
import { Component } from 'react'
import {View, Input } from '@tarojs/components'
import './index.scss'

export default class LgNumber extends Component {
  constructor(props) {
    super(props)
    this.handle = this.handle.bind(this);
    this.setVal = this.setVal.bind(this);
    this.getVal = this.getVal.bind(this);
    this.less = this.less.bind(this);
    this.add = this.add.bind(this);
    this.getWidth = this.getWidth.bind(this);
    this.getMaxLength = this.getMaxLength.bind(this);
  }
  state = {
    value: this.props.default || this.props.start ||0,
    maxLength: this.getMaxLength()
  }
  getMaxLength() {
    var length = this.props.end ? this.props.end.toString().length : 4;
    var length1 = this.props.start ? this.props.start.toString().length : 1;
    return (length > length1) ? length : length1;
  }
  setVal = value => {
    this.setState({value: value});
  }
  getVal() {
    return this.state.value;
  }
  handle() {
    this.props.onClick && this.props.onClick(this.state.value);
  }
  less() {
    var value = this.state.value, start = this.props.start || 0;
    if (value <= start) return;
    this.setState({value: -- value}, this.handle);
  }
  add() {
    var value = this.state.value, end = this.props.end || 1000;
    if (value >= end) return;
    this.setState({value: ++ value}, this.handle);
  }
  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}
  getWidth() {
    var value = this.state.value.toString();
    if (value.length) {
      width = 22 + 18 * value.length;
    } else {
      var width = 40;
    }
    return {width: Taro.pxTransform(width)};
  }
  changeVal(event) {
    var {value} = event.detail;
    var start = this.props.start || 0, end = this.props.end || 1000;
    var number = parseInt(value);
    if (number > end || number < start) {
      // this.setState({value: this.state.value}, this.handle);
      return this.state.value
    } else {
      this.setState({value: value}, this.handle);
    }
  }
  blurInput(event) {
    var {value} = event.detail;
    if (value != this.state.value) {
      this.setState({value: this.state.value});
    }
  }
  render () {
    var props = this.props, value = this.state.value; 
    var className = props.className || "", startCla = "lg_number_btn lg_number_btn_start", endCla = "lg_number_btn lg_number_btn_end";
    var start = props.start || 0, end = props.end || 1000;
    var number = parseInt(value);
    console.log(start)
    if (start >= number) startCla += " lg_number_btn_ban";
    if (end <= number) endCla += " lg_number_btn_ban";
    return (
        <View className={"lg_number clear" + className} style={props.style || {}} >
            <View className={startCla} onClick={this.less} />
            <Input className="lg_number_value" style={this.getWidth()} maxlength={this.state.maxLength} onBlur={this.blurInput.bind(this)} onInput={this.changeVal.bind(this)} value={value} type='number'/>
            <View className={endCla} onClick={this.add} />
        </View>
    )
  }
}